<template>
	<view class="wrap">
		<uni-nav-bar :statusBar="true" :border="false" :fixed="true" leftIcon="back" @clickLeft="$tab.back()"
			title="乐宝通" :background-color="navBg" color="#FFF">
		</uni-nav-bar>
		
		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/lebaotong@2x.png" class="nav-img" mode="">
		</image>

		<view class="content w-full px-20">
			<view class="bg-FFF round-16 shadow-20 py-40 px-32" v-if="topData">
				<view class="flex flex-col items-center" style="padding: 20rpx 0;">
					<view class="text-48 font-700">{{topData.baseLeBaoTong}}</view>
					<view class="text-24 mt-16 text-FF7C01">乐宝通发行总量</view>
				</view>
				<view class="flex justify-between items-center p-20">
					<view class="flex flex-col items-center">
						<view class="flex flex-col items-center">
							<view class="text-36">
								{{topData.ownLeBaoTong}}
							</view>
							<view class="mt-12 text-24 text-F40600" v-if="topData.freezeLeBaoTong > 0">
								冻结:{{topData.freezeLeBaoTong}}
							</view>
						</view>
						<text class="mt-12 text-24">个人持有量</text>
					</view>
					<view>
						|
					</view>
					<view class="flex flex-col items-center">
						<text class="text-36">{{topData.breakLeBaoTong}}</text>
						<text class="mt-12  text-24">销毁量</text>
					</view>
					<view>
						|
					</view>
					<view class="flex flex-col items-center">
						<text class="text-36">{{topData.totalLeBaoTong}}</text>
						<text class="mt-12  text-24">今日流通量</text>
					</view>
				</view>
			</view>

			<view class="bg-FFF round-16 shadow-20 py-32 px-24 mt-20">
				<view class="flex items-center flex-col mb-20">
					<text class="text-36 font-700">最近七日价格走势图</text>
					<text class="text-FF7C01 text-32 mt-12" v-if="topData ">X：日期 &nbsp;&nbsp;&nbsp;&nbsp; Y：价格 &nbsp;&nbsp;&nbsp;&nbsp;今日价格: {{ topData.jinLeBaoTong }}</text>
				</view>
				<view class="charts-box">
					<!-- #ifdef APP-PLUS || H5 -->
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
					<!-- #endif -->
					<!-- #ifdef MP -->
					<qiun-data-charts type="area" :opts="opts" :canvas2d="true" :chartData="chartData" />
					<!-- #endif -->
				</view>
			</view>

			<view class="bg-FFF round-16 shadow-20 py-32 px-20 mt-20">
				<view class="text-32 font-700 text-center">
					乐宝通明细
				</view>

				<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
					<view class="flex justify-between items-center mt-28" v-for="item,index in list" :key="index">
						<view class="text-28">
							<view class="font-700">{{item.useChannel}}</view>
							<view class="mt-16 text-gray">{{item.createTime}}</view>
						</view>
						<view class="flex flex-col items-end">
							<text class="fontS-36" :style="{color:item.payment==1 ? '#FF912A' : '#F41717'}">
								{{item.payment==1 ? '+'+ (item.amount).toFixed(2) : '-'+ (item.amount).toFixed(2)}}
							</text>
							<text class="text-24 sprice mt-16">余额：{{item.left}}</text>
						</view>
					</view>
				</s-pull-scroll>
			</view>
		</view>

<!-- 			<bottomBtn txt="乐宝通兑换" @click="isExchange = true"></bottomBtn>

		<Exchange :show="isExchange" :moneyId="moneyId" :residue="residue" :exchangeName="'乐宝通兑换'" @close="exchangeClose"></Exchange> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBg: "transparent",
				topData: null,
				opts: {
					canvas2d: true,
					legend: {
						show: false,
					},
					yAxis: {
						data: [{
							min: 1.12
						}]
					},
					extra: {
						area: {
							type: 'curve',
							addLine: true,
							gradient: true
						},
					}
				},
				chartData: {},
				list: [],
				isExchange: false,
				moneyId: "",
				residue: "",
			};
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.navBg = '#FA4146'
			} else {
				this.navBg = 'transparent'
			}
		},
		onLoad() {
			this.getData()
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			exchangeClose() {
				this.getData()
				this.isExchange = false
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}
					const res = await this.$Api.user.lncomeList({
						currencyType: this.moneyId,
						pageSize: 10,
						pageNum: pullScroll.page
					})

					console.log(res, '货币记录')

					if (this.title == '待持鹿票') {
						this.price = res.data.daichulupiaoAmount
					}

					this.list = this.list.concat(res.data.lncomeLogList.rows || []);
					if (this.list.length == 0) {
						pullScroll.empty()
					}

					if (this.list.length >= res.data.lncomeLogList.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
			async getData() {
				const topData = await this.$Api.currency.lubaoResult()
				console.log(topData, '乐宝通头部数据')
				this.topData = topData

				const userRichInfo = await this.$Api.user.userRichInfo()
				console.log(userRichInfo, 'userRichInfo')
				userRichInfo.data.forEach(item => {
					item.amount = item.amount.toFixed(2)

					if (item.moneyType.moneyCode == 'LEBAOTONG') {
						this.moneyId = item.moneyId
						// this.residue = item.amount
					}
				})

				this.refresh()
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				this.$Api.currency.lubaoStatictics({
					num: 7,
					status: 3
				}).then(res => {
					console.log(res, '获取折线数据')
					let data = res.data
					let linearareadata = {
						categories: data.dateList,
						series: [{
							name: "",
							color: "#FF8B43",
							smooth: true,
							data: data.amountList,
						}],
					}
					this.opts.yAxis.data[0].min = data.amountList[0]
					console.log(this.opts,'this.opts')
					this.chartData = JSON.parse(JSON.stringify(linearareadata));
				})
			},
		}
	}
</script>

<style lang="scss">
	page,
	.wrap {
		background-color: #F8F8F8;
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 999;
	}

	.nav-img {
		width: 100%;
		height: 540rpx;
	}

	.content {
		position: relative;
		left: 0;
		top: -150rpx;
		z-index: 999;

		.charts-box {
			width: 100%;
			height: 588rpx;
			padding-bottom: 30rpx;
		}
	}
</style>